<!--
 * @Author: Neil 1294641898@qq.com
 * @Date: 2022-09-04 19:19:30
 * @LastEditors: Neil 1294641898@qq.com
 * @LastEditTime: 2022-09-07 10:31:12
 * @FilePath: \stupid_home\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login">
    <h1 style="margin-top: 60px;">{{ msg }}</h1>
    <van-image
      round
      width="200"
      height="150"
      :src="require('../../assets/login/login.png')"
    />
    
    <div class="load">
      <van-form @submit="onSubmit">
      <van-field
      class="frombox"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        class="frombox"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" >登录</van-button>
      </div>
      </van-form>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="toRegister">注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return{
      msg:"笨蛋家具",
      username: '',
      password: '',
      // 4666db2a47d04c2ba277f783a2aa5ab4
      token:""
    }
  },
  mounted() {
    this.username = localStorage.getItem("username")
    this.password = localStorage.getItem("password")
  },
  methods: {
    toRegister() {
      this.$destroy();
      this.$router.push('/register')
    },
    onSubmit() {
      // localStorage.setItem("token",this.token)
      this.$axios({
        url: "user/login",
        method: "post",
        headers:{
          'Content-type': 'multipart/form-data'
          },
        data: {
          username: this.username,
          password:this.password
        }
      }).then((res) => {
        console.log(res,"res");
        if (res.data.code == 200) {
          this.$notify({ type: "success", message: "登录成功" })
          //页面传值，需要把用户的token传入下一个页面，方便获得设备分组信息
          localStorage.setItem("token",res.data.obj.api_token)
          this.$router.push("/group")
        } else {
          this.$notify({ type: "danger", message: "登录失败" })
        }
      })
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login{
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  color: #2c3e50;
  
  .van-image {
    margin:20px 0
  }
  .load{
  width:80%;
  margin:0 auto
}
}

</style>
